<template>
  <div class="coupon_list">
    <van-tabs v-model="activeIndex"
              type="card"
              sticky
              @click="handleTabClick">
      <van-tab v-for="(tabTitle, tabIndex) in tabTitles"
               :title="tabTitle"
               :key="tabIndex">
        <van-list v-model="loading"
                  :finished="finished"
                  :immediate-check="false"
                  finished-text="没有更多了"
                  @load="getCouponList">
          <van-panel style=" padding-bottom: 10px;">
            <div class="van-coupon-item"
                 v-for="(coupon,index) in couponList"
                 :key="index">
              <div class="van-coupon-item__content">
                <div class="van-coupon-item__head">
                  <h2>
                    <span>¥</span>
                    {{coupon.discount}} 元
                  </h2>
                  <p>{{coupon.desc }} - {{coupon.tag}}</p>
                </div>
                <div class="van-coupon-item__body">
                  <h2>{{coupon.name}}</h2>
                  <p>有效期: 至 {{coupon.endTime}}</p>

                </div>
              </div>

            </div>
          </van-panel>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import {couponMyList} from '@/api/api';

  import {Card, CouponCell, CouponList, List, Panel, Tab, Tabs} from 'vant';

  export default {
    name: 'coupon-list',

    props: {
      active: {
        type: [String, Number],
        default: 0
      }
    },
    created() {
      this.init();
    },
    data() {
      return {
        activeIndex: Number(this.active),
        tabTitles: ['未使用', '已使用', '已过期'],
        couponList: [],
        page: 0,
        limit: 10,
        loading: false,
        finished: false
      };
    },

    methods: {
      init() {
        this.page = 0;
        this.couponList = [];
        this.getCouponList();
      },
      getCouponList() {
        this.page++;

        couponMyList({
          status: this.activeIndex,
          page: this.page,
          limit: this.limit
        }).then(res => {
          this.couponList.push(...res.data.data.list);

          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        });
      },
      handleTabClick() {
        this.page = 0;
        this.couponList = [];
        this.getCouponList();
      }
    },
    components: {
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
      [Panel.name]: Panel,
      [Card.name]: Card,
      [List.name]: List,
      CouponCell,
      CouponList
    }
  };
</script>

<style lang="scss" scoped>

  .van-coupon-item {
    overflow: hidden;
    border-radius: 4px;
    margin: 0 15px 15px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  }

  .van-coupon-item:active {
    background-color: #e8e8e8;
  }

  .van-coupon-item__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100px;
    padding: 24px 0 0 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid red;
  }

  .van-coupon-item h2,
  .van-coupon-item p {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .van-coupon-item h2 {
    height: 34px;
    font-weight: 500;
    line-height: 34px;
  }

  .van-coupon-item p {
    font-size: 12px;
    line-height: 16px;
    color: #969799;
  }

  .van-coupon-item__head {
    min-width: 90px;
  }

  .van-coupon-item__head h2 {
    color: #f44;
    font-size: 24px;
  }

  .van-coupon-item__head h2 span {
    font-size: 50%;
  }

  .van-coupon-item__body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    border-radius: 0 4px 4px 0;
    margin-left: 20px;
  }

  .van-coupon-item__body h2 {
    font-size: 16px;
  }

  .van-coupon-item__corner {
    top: 16px;
    right: 15px;
    position: absolute;
  }

  .van-coupon-item__corner .van-icon {
    border-color: #f44;
    background-color: #f44;
  }

  .van-coupon-item__reason {
    padding: 7px 15px;
    border-top: 1px dashed #ebedf0;
    background-color: #fafafa;
  }

  .van-coupon-item--disabled:active {
    background-color: #fff;
  }

  .van-coupon-item--disabled .van-coupon-item__content {
    height: 90px;
  }

  .van-coupon-item--disabled h2,
  .van-coupon-item--disabled p,
  .van-coupon-item--disabled span {
    color: #969799;
  }
</style>
